<template>
	<view class="body" :style="{height: wh + 'px'}">
	  <swiper class="swiperImg-list" indicator-dots circular>
	    <swiper-item v-for="(item, i) in swiperList" :key="i" class="swiperImg-item">
	      <view>
	        <image :src="item" mode="widthFix"/>
	      </view>
	    </swiper-item>
	  </swiper>
	
	  <view class="displayBox">
	     <!-- 标题 -->
	    <view class="title">
	      <text>展区</text>
	    </view>
	    <!-- 展区图片 -->
	    <view class="display-area" >
	      <view v-for="(item, i) in displayAreaList" :key="i" class="dis-item">
	        <navigator class="nav" :url="'/subpkg/exhibition/exhibition?id=' + (i+1)">
	          <image :src="item.img" mode="widthFix"/>
	          <text>{{item.text}}</text>
	        </navigator>
	      </view>
	    </view>
	  </view>
	
	  <view class="visitInfoBox">
	    <view class="title">
	      <text>参观指南</text>
	    </view>
	    <view class="visitTimeBox">
	      <text class="visitTime">09:00-17:30</text>
	      <text>(17:00停止进场)</text>
	    </view>
	    <view class="tip">
	      <text>*逢周一闭馆（节假日及特殊情况除外）\n</text>
	      <text>*康陵遗址区每日限流1000人 \n</text>
	      <text>*博物馆区：广州市番禺区大学城华师一路8号，参观入口在博物馆南门（国医西路）\n</text>
	      <text>*康陵遗址：广州市番禺区大学城康陵路（博物馆区西侧，从南门步行5分钟可达）</text>
	    </view>
	  </view>
	  
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//轮播图
				swiperList: [
				      "http://8.130.102.135:9000/library/home1.jpg", 
				      "http://8.130.102.135:9000/library/home2.jpg", 
				      "http://8.130.102.135:9000/library/home3.png",
				      "http://8.130.102.135:9000/library/home4.png", 
				      "http://8.130.102.135:9000/library/home5.jpg"
				    ],
				//展区
				displayAreaList: [
				  {
					img: "http://8.130.102.135:9000/library/zhanlan1.19a50c3e.jpg",
					text: "康陵展区",
					url: "/subpkg/exhibition/exhibition"
				  },
				  {
					img: "http://8.130.102.135:9000/library/zhanlan2.beca3ceb.jpg",
					text: "云山珠水间",
					url: "/subpkg/ysDisplay/ysDisplay"
				  },
				  {
					img:  "http://8.130.102.135:9000/library/zhanlan3.4b3ebc6e.jpg",
					text: "汉风唐韵",
					url: "/subpkg/hfDisplay/hfDisplay"
				  },
				  {
					img: "http://8.130.102.135:9000/library/zhanlan4.9eae2b88.jpg",
					text: "考古活动中心",
					url: "/subpkg/kgDisplay/kgDisplay"
				  }
				   
				  
				],
				//系统属性
				sysInfo: {},
				//手机屏幕高度
				wh: 0
			};
		},
		methods: {
			//设置屏幕高度
			setSysInfo() {
				const sysInfo = uni.getSystemInfoSync()
				const wh = sysInfo.windowHeight 
				this.sysInfo = sysInfo
				this.wh = wh
				console.log("sys: "+this.sysInfo.windowHeight)
			},
		},
		onLoad() {
			this.setSysInfo()
		}
	}
</script>

<style lang="scss">
.body {
  /* height: 1000px; */
  background-color: #e0e7c8;
}

/* 轮播图 */
.swiperImg-list {
  /* background-color: #6bae91; */
  background-color: #e0e7c8;
  /* background-color: #5c2223; */
}
.swiperImg-item {
  display: flex;
  justify-content: center;
}

/* 图片边框修饰 */
.textBorder {
  width: 40px;
  height: 40px;
}

/* 展区介绍 */
.displayBox {
  border: 1px solid red;
  border-radius: 20px;
  /* width: 370px; */
  height: 300rpx;
  background-color: #e0e7c8;
  /* background-color: #5c2223; */
}
.title {
  /* border: 1px solid rgb(15, 235, 51); */
  display: flex;
  align-items: center;
  margin: 8px;
  margin-bottom: 5px;
}
.title text {
  font-family: cursive;
  font-size: 20px;
  font-style: normal;
  font-weight: bold;
  margin: 5px;
}
/* 展区图片样式 */
.display-area {
  height: 120px;
  /* border: 1px solid black; */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.dis-item .nav{
  /* border: 1px solid blue; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  text-align: center;
}
.dis-item image{
  width: 67px;
  padding: 0 0 5px 0;
}
.dis-item text {
  font-size: 12px;
}

/* 参观指南 */
.visitInfoBox {
  border: 1px solid red;
  border-radius: 20px;
  width: 370px;
  /* height: 300px; */
  background-color: #e0e7c8;
}
.visitInfoBox .title {
  margin: 2px;
}
/* 设置时间旁边文本颜色 */
.visitInfoBox .visitTimeBox {
  margin: 0 5px 0 5px;
  color: #97744d; 
}
/* 设置时间主题颜色 */
.visitInfoBox .visitTimeBox .visitTime{
  font-size: 40px;
  font-weight: bold;
  color: #693a09;
  text-shadow: 5px 1px 6px rgba(0, 0, 0, 0.459);
  margin: 2px;
}
.visitInfoBox .tip {
  margin: 10px;
}
</style>
